<template>
	<div class="w-page w-wodonation">
		<Header navNum="4" @isSearch='isSearch'></Header>
		<div class="conbox" v-if="!isSearchList">
			<div class="w-width">
				<div class="w-cardbox">
					<div class="w-card flex hs vs">
						<Leftcard class="w-card-left shrink0" :isBackHome="isBackHome" :deAcBig='acBig' v-if="menuList.length>0" :menuList="menuList" :columnName="columnName" @aa="out" :isToDonate='false'></Leftcard>
						<div class="tabCon">
							<div class="w-tabtop flex hs vc">
								<img src="../assets/img/index/home.png" alt="" class="w-home">
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
									<el-breadcrumb-item :to="{}"><span @click="acBig = '0'; isBackHome = true">{{ columnName }}</span></el-breadcrumb-item>
                  <el-breadcrumb-item :to="{}"><span @click="isdetail = 0">{{ title }}</span></el-breadcrumb-item>
									<el-breadcrumb-item v-if="isdetail == 1">详情</el-breadcrumb-item>
									<el-breadcrumb-item v-if="isdetail == 2">我要捐赠</el-breadcrumb-item>
								</el-breadcrumb>
							</div>
							<div class="w-mainhtml" v-if="isdetail == 0">
								<div class="w-tabtitle">{{title}}</div>
								<div v-if="List.length>0">
									<ul class="w-big-cardul">
										<li v-for="(v,i) in List">
											<h3>{{v.projectTitle}}</h3>
											<p class="w-text">{{v.introduction}}</p>
											<div class="w-btnbox flex he vc">
												<div class="w-a flex vc" @click="toDonate">
													<p>我要捐赠</p>
													<img src="../assets/img/index/clickto.png" alt="" class="clickimg">
												</div>
												<div class="w-a flex he vc" @click="todetail(v.id)">
													<p>项目详情</p>
													<img src="../assets/img/index/clickto.png" alt="" class="clickimg">
												</div>
											</div>
										</li>
									</ul>
									<el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="size" layout="total, prev, pager, next"
									 :total="total">
									</el-pagination>
								</div>
								<div v-else>
									<div class="w-con">暂无</div>
								</div>
							</div>
							<!-- 我要捐赠 -->
							<toDonate v-if="isdetail==2" :fundId="fundId"></toDonate>
							<!-- 详情-->
							<detailPage class="w-detail" v-if="isdetail==1" :info='info'></detailPage>
						</div>
					</div>
				</div>
				<!-- 正文内容 结束 -->
			</div>
		</div>
		<!-- 底部开始 -->
		<Footer></Footer>
		<!-- 底部结束 -->
	</div>
</template>

<script>
	import detailPage from "./common/detail"
	import toDonate from "./formbox/toDonate"
	import {
		projectClassList,
		projectList,
		projectDetail
	} from '@/api/project'
	export default {
		components: {
			"detailPage": detailPage,
			"toDonate": toDonate
		},
		data() {
			return {
				columnName: '捐款项目',
				title: '',
				acBig: '',
				menuList: [],
				// 列表
				List: [],
				size: 5,
				page: 1,
				total: 0,
				classId: 0,
				// 详情
				isdetail: 0,
				info: {},
				fundId:0,
				isFirst:true,
				deAcBig:"0",
				isSearchList: false,
        isBackHome: false
			};
		},

    beforeCreate() {
      if (this.$route.query.deAcBig) {
        this.acBig = this.$route.query.deAcBig.toString()
      }
    },

		created() {
			this.isSearch()
			this.dataGet()
			// if(this.$route.query.deAcBig&&this.isFirst==true){
			// 	this.isFirst = false
			// 	this.acBig = this.$route.query.deAcBig.toString()
			// 	this.deAcBig =this.$route.query.deAcBig.toString()
			// }
		},

    watch: {
      $route () {
        this.acBig = this.$route.query.deAcBig
        this.out(JSON.stringify({
          acBig: this.acBig,
          acSml: ''
        }))

        this.changeMenu()
      }
    },

		methods: {
      // 我要捐赠
      toDonate() {
        // 事件触发 显示捐赠模态框
        this.$eventBus.$emit('isShowCodeDialog', true, false)
      },

			isSearch(data){
				console.log(data)
				this.isSearchList=data
			},
			getList() {
				console.log(this.classId)
				projectList({
					classId: this.classId,
					size: this.size,
					page: this.page,
				}).then(response => {
					this.List = response.data.list
					this.total = response.data.total
					this.List.forEach(v => {
						v.con = v.title
					})
				})
			},
			out(data) {
        var _this = this;
        if (data) {
					this.isdetail=0
					_this.page = 1
					let cacheData = JSON.parse(data)
					_this.acBig = cacheData.acBig.toString()

          _this.$router.replace({
            path: '/donation_projects',
            query: {
              deAcBig: parseInt(_this.acBig)
            }
          }).catch(err => {})
				}
        this.isBackHome = false
			},

      changeMenu() {
        let _this = this

        _this.menuList.forEach(item => {
          if (parseInt(item.id) === parseInt(_this.acBig)) {
            _this.title = item.name

            _this.classId = item.apiId
          }
        });
        _this.getList()
      },

			// 获取左侧菜单
			dataGet() {
				projectClassList().then(response => {
          var array = []
          response.data.map((item, index) => {
						item.apiId = item.id
						item.id = index+1
						array.push(
							Object.assign({}, item, {
								name: item.className,
								ischildren: false
							})
						)
					});
					this.menuList = array

          // 判断是否从子菜单进入
          if (this.$route.query.deAcBig) {
            this.acBig = this.$route.query.deAcBig
            this.out(JSON.stringify({
              acBig: this.acBig,
              acSml: ''
            }))
            this.changeMenu()
          } else {
            this.classId = this.menuList[0].id
          }
				})
			},
			// 分页
			handleCurrentChange(currentPage) {
				this.page = currentPage;
				this.getList()
			},
			todetail(id) {
				this.isdetail = 1
				projectDetail({
					id: id,
				}).then(response => {
				  console.log(response.data)
          var obj = response.data
          obj.content = response.data.detail
					obj.title = response.data.projectTitle
          obj.className = 'yjxm'
					this.info = obj
				})
				console.log(this.info)
			},
			// 我要捐赠
			todonation(id) {
				this.isdetail = 2
				this.fundId=id
			}
		}
	};
</script>
<style scoped>
	/* ............... */
	.w-big-cardul li {
		border-bottom: 1PX solid #DDDDDD;
		margin-bottom: 36px;
		padding-bottom: 36px;
	}

	.w-big-cardul li:last-child {
		border: none;
	}

	.w-big-cardul h3 {
		width: 100%;
		font-size: 28px;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		padding-bottom: 23px;
		text-indent: 6px;

	}

	.w-big-cardul .w-text {
		padding-top: 23px;
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		text-indent: 34px;
		line-height: 2;
	}

	.w-btnbox {
		margin-top: 63px;
	}

	.w-btnbox .w-a {
		padding: 13px 16px;
		background: #791C1C;
		color: #fff;
		line-height: 1;
		border-radius: 5px;
		font-size: 20px;
		margin-left: 25px;
		cursor: pointer;
	}

	.w-btnbox .w-a p {
		color: #fff;
	}

	.clickimg {
		width: 28px;
		height: 28px;
		display: block;
		margin-left: 13px;
	}
</style>
<style scoped>
	/* 公共css */
	.w-card {
		background: #fff;
	}

	.w-card-left {
		width: 26%;
	}

	/* 右侧 */
	.w-home {
		width: 16px;
		display: block;
		height: 14px;
		margin-right: 15px;
	}

	.tabCon {
		padding: 35px 33px;
		box-sizing: border-box;
		width: 74%;
	}

	.w-tabtitle {
		margin-top: 39px;
		margin-bottom: 47px;
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}

	.w-width {
		width: 70%;
		padding-top: 15px;
		margin: 0 auto;
	}

	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}
</style>
<style>
	/* 面包屑 */
	.w-page .el-tabs--left .el-tabs__header.is-left {
		width: 26%;
	}

	.w-page .el-tabs--left .el-tabs__item.is-left {
		text-align: center;
		color: #333;
		font-size: 18px;
	}

	.w-page.el-breadcrumb__inner a:hover,
	.el-breadcrumb__inner.is-link:hover {
		color: #692324;
	}


	.w-wodonation .el-pager li {
		border: 1PX solid #9C9A9B;
		margin: 0 7px;
		font-size: 14px;
		font-weight: 300;
		border-radius: 3px;
	}
	.w-wodonation .el-pager li.active+li {
		border: 1PX solid #9C9A9B;
	}

	.w-wodonation .el-pager li.active {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-wodonation .el-pager li:hover {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-wodonation .el-pagination {
		text-align: center;
	}
</style>
